<html>
<head>
<meta charset="utf-8">
<title>安全事件</title>
<link href="../westcss/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../westcss/datatables.min.css" rel="stylesheet" type="text/css" />
<link href="../westcss/datatables.bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../westcss/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
<link href="../westcss/plugins.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../westcss/layer.css">
<link href="../westcss/jquery.toolbar.css" rel="stylesheet" />
<link rel="stylesheet" href="../westcss/font-awesome.min.css">
</head>
<body>
<div class="container-fluid">
	<div class="row-fluid">
		<div class="col-md-12">
			<div class="row-fluid">			
				<div class="col-md-3">
				<div class="portlet light bordered">
				<div class="portlet-title">
					事件类别占比
                </div>
					<div id="mainw1" style="width:100%;height:30%;"></div>
				</div>
				</div>
				<div class="col-md-4">
				<div class="portlet light bordered">
				<div class="portlet-title">
					事件类别统计
                </div>
					<div id="mainw2" style="width:100%;height:30%;"></div>
				</div>
				</div>
				<div class="col-md-4">
					<div class="portlet light bordered">
                                    <div class="portlet-title">
										事件类别描述
										<!--
										@列段过滤测试
										-->
										<button type="button" class="btn" id="showcol">设置列</button>
										<ul class="showul"
											style="list-style:none;display:none; position:relative; top:10px; background:#FFFFFF; border:1px solid #ccc; width:180px;">
											<li>
												<input type="checkbox" checked class="toggle-vis" data-column="0"/>
												事件名称
											</li>
											<li>
												<input type="checkbox" checked class="toggle-vis" data-column="1"/>
												事件描述
											</li>
											<li>
												<input type="checkbox" checked class="toggle-vis" data-column="2"/>
												威胁等级
											</li>
											
										</ul>
                                    </div>
                                    <div class="portlet-body">
                                        <table class="table table-striped table-bordered table-hover" id="sample_1">
                                            <thead>
                                                <tr>
                                                    <th> 事件名称 </th>
                                                    <th> 事件描述 </th>
                                                    <th> 威胁等级 </th>
													<th> 事件操作 </th>
													
                                                </tr>
                                            </thead>
                                            <tbody>
                                            
                                            </tbody>
                                        </table>
                                    </div>
                    </div>
					<!--
					@模态框
					-->
					<div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="demoModalLabel" aria-hidden="true" data-backdrop="static">
						<div class="modal-dialog" style="width: 500px;">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="demoModalLabel">事件编辑</h4>
								</div>
								<div class="modal-body" style="height: 240px;">
									<form action="" method="post" id="userForm">
										<!--
										隐藏域用于传递表格当前的行序号index
										-->
										<input type="hidden" id="getIndexId">
										<div class="form-group">
										<label for="name">事件名称</label>
										<input type="text" class="form-control" id="sjmc">
										</div>
										<div class="form-group">
										<label for="name">事件描述</label>
										<input type="text" class="form-control" id="sjms">
										</div>
										<div class="form-group">
										<label for="name">威胁等级</label>
										<input type="text" class="form-control" id="wxdj">
										</div>
									</form>
								</div><!-- /.modal-body -->
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									<button type="button" class="btn btn-primary" onclick="saveOrUpdateUser()">提交更改</button>
								</div>
							</div><!-- /.modal-content -->
						</div><!-- /.modal -->
					</div>
					
					<div class="modal fade" id="demoModal_ip" tabindex="-1" role="dialog" aria-labelledby="demoModalLabel" aria-hidden="true" data-backdrop="static">
						<div class="modal-dialog" style="width: 500px;">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="demoModalLabel">IP画像</h4>
								</div>
								<div class="modal-body" style="height: 360px;">
									<div class="portlet light bordered">
												<div class="portlet-title">
													IP画像详情
												</div>
												<div class="portlet-body">
													<table class="table table-striped table-bordered table-hover" id="sample_ip">
														<thead>
															<tr>
																<th> IP地址 </th>
																<th> IP所属位置 </th>
																<th> 注册人组织 </th>
																<th> 注册人国家或地区 </th>
																<th> 电子邮件 </th>
																<th> 团队或个人名称 </th>
																
															</tr>
														</thead>
														<tbody>
														   
														</tbody>
													</table>
												</div>
									</div>
								</div><!-- /.modal-body -->
								
							</div><!-- /.modal-content -->
						</div><!-- /.modal -->
					</div>
				</div>
				<div class="col-md-1">
					<div style="margin-top:10px;"></div>
					<div id="toolId">
						<div data-toolbar="user-options" class="btn-toolbar pull-left"><i class="fa fa-cog"></i></div>
							<div id="user-options" class="toolbar-icons hidden">
								<a href="#" onclick="test();"><i class="fa fa-user"></i></a>
								<a href="#" onclick="ipshow();"><i class="fa fa-star"></i></a>
								<a href="#" onclick="glfx();"><i class="fa fa-edit"></i></a>
								<a href="#" onclick="tyfx();"><i class="fa fa-trash"></i></a>
								<a href="#" onclick="ldgz();"><i class="fa fa-circle"></i></a>
								<a href="#" onclick="zcsx();"><i class="fa fa-save"></i></a>
							</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row-fluid">
		<div class="col-md-12">
			<div class="row-fluid">
			
				<div class="col-md-5">
				<div class="portlet light bordered">
				<div class="portlet-title">
                      具体事件统计                 
                </div>
					<div id="mainw3" style="width:100%;height:30%;"></div>
				</div>
				</div>
			
				<div class="col-md-6">
					<div class="portlet light bordered">
                                    <div class="portlet-title">
										具体事件描述
                                    </div>
                                    <div class="portlet-body">
                                        <table class="table table-striped table-bordered table-hover" id="sample_2">
                                            <thead>
                                                <tr>
                                                    <th> 发生时间 </th>
                                                    <th> 远程IP </th>
                                                    <th> 本地IP </th>
                                                    <th> 远程IP归属 </th>
                                                    <th> 原始信息 </th>
													<th> 资产名称 </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                               
                                            </tbody>
                                        </table>
                                    </div>
                    </div>
				</div>
				<div class="col-md-1">
					<input style="position:fixed;" size=13 type="text" id="searchId" ondrop="drop(event)" ondragover="allowDrop(event)" placeholder="请拖动文本查找"/>
				</div>
			</div>
		</div>
	</div>
	<div class="row-fluid">
		<div class="col-md-11">
		<div class="portlet light bordered">
			<div class="portlet-title">
				事件时间趋势统计
				<div style="text-align:right">
				<input onclick="switchTime_H();" type="radio" name="mytime" value="H" checked />按小时 <input onclick="switchTime_d();" type="radio" name="mytime" value="d" />按天 <input onclick="switchTime_M();" type="radio" name="mytime" value="M"/>按月
				</div>
			</div>
			<div id="mainw4" style="width:100%;height:30%;"></div>
		</div>
		</div>
		<div class="col-md-1">
		</div>
	</div>
</div>

<script src="../westjs/jquery.min.js" type="text/javascript"></script>
<script src="../westjs/bootstrap.min.js" type="text/javascript"></script>
<script src="../westjs/jquery-ui-custom.min.js"></script>
<script src="../westjs/echarts.min.js"></script>
<script src="../westjs/jquery.pin.js"></script>
<script src="../westjs/layer.js"></script>
<script src="../westjs/jquery.toolbar.min.js"></script>
<script src="../westjs/datatables.min.js" type="text/javascript"></script>
<script src="../westjs/datatables.bootstrap.js" type="text/javascript"></script>
<!--添加全局申请ip-->
    <script src="../gobal_ip/gobal_ip.js" type="text/javascript"></script>

<script type="text/javascript">

	$.ajaxSetup({
			async: false
	});
	
	jQuery(document).ready(function($) {

		$('div[data-toolbar="user-options"]').toolbar({
			content: '#user-options',
			position: 'bottom',
		});	
		
	})
	
	//@测试拖拽事件
	function allowDrop(ev)
	{
		ev.preventDefault();
	}
	function drag(ev)
	{
		ev.dataTransfer.setData("tableme",ev.target.id);
	}
	function drop(ev)
	{
		ev.preventDefault();
		var data=ev.dataTransfer.getData("tableme");
		var searchText=document.getElementById(data);
		ev.target.value=searchText.innerHTML;
		//模拟根据IP查找IP画像
		eventall=getTwoDensionArr(1,6);	
		tmp=[];
/*
		$.ajax({
			url: "../subwest/data/IP.json",
			async: false,//改为同步方式
			type: "GET",
		//	data: { arg: val },
			success: function (data) {
				eventall.length=data.data.length;
				$(data.data).each(function(index,items){
					tmp.push(items.ip);
					tmp.push(items.ipwz);
					tmp.push(items.zcrzz);
					tmp.push(items.zcdz);
					tmp.push(items.dzyj);
					tmp.push(items.hkmc);
					eventall[index]=tmp;
					tmp=[];
				})
			}
		});
*/
	    //  var jsonIpObj={category:"detail",ip:ev.target.value};
		//@注释行为接口，暂未测试数据
		var jsonIpObj={category:"detail",ip:"51.254.209.163"};
		$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/ipStat?param="+JSON.stringify(jsonIpObj)),function(data){
			eventall.length=data.data.length;
			$(data.data).each(function(index,items){
				tmp.push(items.ip);
				tmp.push(items.ipwz);
				tmp.push(items.zcrzz);
				tmp.push(items.zcdz);
				tmp.push(items.dzyj);
				tmp.push(items.hkmc);
				eventall[index]=tmp;
				tmp=[];
			})
		});
			
		$('#sample_ip').dataTable({
			"destroy": true,
			"data": eventall,	
			"searching":false,
			"pageLength": 2,
			"lengthChange": false,
			"info":false,
			 buttons: [
				{ extend: 'print', className: 'btn dark btn-outline' },
				{ extend: 'pdf', className: 'btn green btn-outline' },
				{ extend: 'csv', className: 'btn purple btn-outline ' }
			],
			responsive: true,
			colReorder: {
				reorderCallback: function () {
					console.log( 'callback' );
				}
			},
			"order": [
				[0, 'asc']
			],
			"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>"
		});
		modalInit_ip("demoModal_ip");
		$("#demoModal_ip").modal('show');
	}
	pieData=[];
	pieData_type=[];
	pieData_nums=[];
/*
	$.ajax({
		url: "../subwest/data/pie.json",
		async: false,//改为同步方式
		type: "GET",
	//	data: { arg: val },
		success: function (data) {
			$(data.data).each(function(index,item){
				pieData.push({
					value: item.count,
					name: item.name
				});
				pieData_type.push(
					item.name
				);
				pieData_nums.push(
					item.count				
				);
			})
		}
	});
*/
	var jsonObj={category:"typeChart",level:2}; 
	$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/levelStat?param="+JSON.stringify(jsonObj)),function(data){
		$(data.data).each(function(index,item){
			pieData.push({
				value: item.count,
				name: item.name
			});
			pieData_type.push(
				item.name
			);
			pieData_nums.push(
				item.count				
			);
		})
	});
	
	barData_event=[];
	barData_nums=[];
/*
	$.ajax({
		url: "../subwest/data/barEvent.json",
		async: false,//改为同步方式
		type: "GET",
	//	data: { arg: val },
		success: function (data) {
			$(data.data).each(function(index,item){
				barData_event.push(
					item.sjmc
				);
				barData_nums.push(
					item.count				
				);
			})
		}
	});
*/
	var jsonBarObj={category:"eventChart",level:2}; 
	$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/levelStat?param="+JSON.stringify(jsonBarObj)),function(data){
		$(data.data).each(function(index,item){
			barData_event.push(
				item.sjmc
			);
			barData_nums.push(
				item.count				
			);
		})
	});
	
	lineData_time=[];
	lineData_nums=[];
/*
	$.ajax({
		url: "../subwest/data/line.json",
		async: false,//改为同步方式
		type: "GET",
	//	data: { arg: val },
		success: function (data) {
			$(data.data).each(function(index,item){
				lineData_time.push(
					item.time
				);
				lineData_nums.push(
					item.count				
				);
			})
		}
	});
*/
	
	function getTwoDensionArr(dension,len)
	{
		var arr=new Array();
		for(var i=0;i<dension;i++)
		{
			arr[i]=new Array();
			for(var j=0;j<len;j++)
			{
				arr[i][j]="dafault";
			}
		}
		return arr;
	}
				
	function test(){

		layer.open({
		  type: 2,
		  title: '事件查找',
		  shadeClose: true,
		  shade: 0.8,
		  area: ['500px', '70%'],
		  offset: 't',
		  content: 'evsearch.html' //iframe的url
		}); 
	}

	function ipshow(){
		layer.open({
		  type: 2,
		  title: 'IP画像/历史事件',
		  shadeClose: true,
		  shade: 0.8,
		  area: ['500px', '70%'],
		  offset: 't',
		  content: 'ipshow.html' //iframe的url
		}); 
	}
	
	function glfx(){
		layer.open({
		  type: 2,
		  title: '关联分析',
		  shadeClose: true,
		  shade: 0.8,
		  area: ['500px', '70%'],
		  offset: 't',
		  content: '../yz/correlation_analysis.html' //iframe的url
		}); 
	}
	
	function tyfx(){
		layer.open({
		  type: 2,
		  title: '同源分析',
		  shadeClose: true,
		  shade: 0.8,
		  area: ['500px', '70%'],
		  offset: 't',
		  content: '../yz/common_attack_source_analysis.html' //iframe的url
		}); 
	}
	
	function zcsx(){
		layer.open({
		  type: 2,
		  title: '资产时序',
		  shadeClose: true,
		  shade: 0.8,
		  area: ['500px', '70%'],
		  offset: 't',
		  content: '../yz/zichan_shixu.html' //iframe的url
		}); 
	}
	
	function ldgz(){
		layer.open({
		  type: 2,
		  title: '联动规则下发',
		  shadeClose: true,
		  shade: 0.8,
		  area: ['500px', '70%'],
		  offset: 't',
		  content: '../ldgz/index.html' //iframe的url
		}); 
	}
	
	function addBase(arr){
		layer.open({
		  type: 1,
		  skin: 'layui-layer-rim', //加上边框
		  area: ['420px', '240px'], //宽高
		  shadeClose: true, //开启遮罩关闭
		  btn: '确认添加到威胁情报库',
		  offset: 't',
		  content: '<div style='+'margin-top:20px;margin-left:30px;'+'>'+'事件名称 '+arr[0]+'<br>'+'事件描述 '+arr[1]+'<br>'+'威胁等级 '+arr[2]+'</div>'
		});
	}
	//@模态框
	function modalInit(modalName,index)
	{
		var modalName = '#' + modalName;
		//设置模态框可移动
		$(modalName).draggable({   
			handle: ".modal-header",   
			cursor: 'move',   
			refreshPositions: false
		});
				
		//模态框居中显示
		function centerModals() {   
			$(modalName).each(function(i){  
				var $clone = $(this).clone().css('display', 'block').appendTo('body');
				//设置modal垂直居中
				var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);   
				top = top > 0 ? top : 0;   
				$(this).find('.modal-content').css("margin-top", top);
				$clone.remove();
			   
			});
		}
		//调用show方法时触发
		$(modalName).on('show.bs.modal', function(){
			centerModals();
			var tds=$("#sample_1 tbody").find("tr").eq(index).find("td");
			$("#sjmc").val(tds.eq(0).text());
			$("#sjms").val(tds.eq(1).text());
			$("#wxdj").val(tds.eq(2).text());
			$("#getIndexId").val(index);
		});
		$(window).on('resize', centerModals);  
	}
	function modalInit_ip(modalName)
	{
		var modalName = '#' + modalName;
		//设置模态框可移动
		$(modalName).draggable({   
			handle: ".modal-header",   
			cursor: 'move',   
			refreshPositions: false
		});
				
		//模态框居中显示
		function centerModals() {   
			$(modalName).each(function(i){  
				var $clone = $(this).clone().css('display', 'block').appendTo('body');
				//设置modal垂直居中
				var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);   
				top = top > 0 ? top : 0;   
				$(this).find('.modal-content').css("margin-top", top);
				$clone.remove();
			   
			});
		}
		//调用show方法时触发
		$(modalName).on('show.bs.modal', function(){
			centerModals();
		});
		$(window).on('resize', centerModals);  
	}
	
	function editData(index)
	{		
		modalInit("demoModal",index);
		$("#demoModal").modal('show');	
	}
	function saveOrUpdateUser()
	{
		var index=$("#getIndexId").val();
		var tds=$("#sample_1 tbody").find("tr").eq(index).find("td");
		tds.eq(0).text($("#sjmc").val());
		tds.eq(1).text($("#sjms").val());
		tds.eq(2).text($("#wxdj").val());
		$("#demoModal").modal('hide');
	}
	
	$("#toolId").pin();

	var myChartw1 = echarts.init(document.getElementById('mainw1'));
	var myChartw2 = echarts.init(document.getElementById('mainw2'));
	var myChartw3 = echarts.init(document.getElementById('mainw3'));
	var myChartw4 = echarts.init(document.getElementById('mainw4'));
	
	var optionw1 = {
		
		tooltip : {
			trigger: 'item',
		//	triggerOn:'click',
		//	enterable:'true',
			formatter: "{a} <br/>{b} : {c} ({d}%)"
		},
		
		series : [
			{
				name: '访问来源',
				type: 'pie',
				radius : '55%',
				center: ['50%', '60%'],
				data: pieData,
				/*
				[
					{value:335, name:'直接访问'},
					{value:310, name:'邮件营销'},
					{value:234, name:'联盟广告'},
					{value:135, name:'视频广告'},
					{value:1548, name:'搜索引擎'}
				],
				*/
				itemStyle: {
					emphasis: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}
		]
	};
	myChartw1.setOption(optionw1);
	
	//@
	var optionw2 = {
		color: ['#3398DB'],
		tooltip : {
			trigger: 'axis',
			axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis : [
			{
				type : 'category',
				data : pieData_type,
				/*
				['subType-A','subType-B','subType-C','subType-D','subType-E'],
				*/
				axisTick: {
					alignWithLabel: true
				}
			}
		],
		yAxis : [
			{
				type : 'value'
			}
		],
		series : [
			{
				name:'直接访问',
				type:'bar',
				barWidth: '60%',
				data:pieData_nums
			}
		]
	};
	myChartw2.setOption(optionw2);
	
	barTypeEvent=getTwoDensionArr(1,4);
	
	//@测试事件编辑以及添加到库功能
	function addOk(index)
	{
		//alert(index);
		var arr=[];
		var tds=$("#sample_1 tbody").find("tr").eq(index).find("td");
		arr.push(tds.eq(0).text());
		arr.push(tds.eq(1).text());
		arr.push(tds.eq(2).text());
		addBase(arr);
		
	}
	
	//var edit_item="<a class='edit' href='javascript:;'> <i class='fa fa-edit'>编辑事件</i> </a>";
	function edit_item(index)
	{
		var str="<a onclick="+"editData("+index+"); href='javascript:;'><i class='fa fa-edit'></i> </a>";
		return str;
	}
	function add_item(index)
	{
		var str="<a onclick="+"addOk("+index+"); href='javascript:;'><i class='fa fa-save'></i></a>";
		return str;
	}	
	function edit_add_item(index)
	{
		var str1=edit_item(index);
		var str2=add_item(index);
		return str1+"<br>"+str2;
	}
	
	
	myChartw2.on('mouseover', function (params) {
		$('#showcol').show();
		tmp=[];
		//console.log(params.name); 根据事件类型返回对应的事件列表
		
		var jsonTableObj={category:"typeList",name:params.name,level:2};
		$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/levelStat?param="+JSON.stringify(jsonTableObj)),function(data){
			barTypeEvent.length=data.data.length;
			$(data.data).each(function(index,items){
				if(items.sjms=="")
				{
					items.sjms="undefined";
				}
				tmp.push(items.sjmc);
				tmp.push(items.sjms);
				tmp.push(items.wxcd);
				tmp.push(edit_add_item(index%2));
				//tmp.push(add_item(index));
				barTypeEvent[index]=tmp;
				tmp=[];
			})
		});
/*
		if(params.name=="subType-A")
		{
			$.ajax({
				url: "../subwest/data/barType.json",
				async: false,//改为同步方式
				type: "GET",
			//	data: { arg: val },
				success: function (data) {
					$(data.data).each(function(index,items){
						tmp.push(items.sjmc);
						tmp.push(items.sjms);
						tmp.push(items.wxdj);
						tmp.push(edit_add_item(index%2));
						//tmp.push(add_item(index));
						barTypeEvent[index]=tmp;
						tmp=[];
					})
				}
			});
		}
		else
		{
			$.ajax({
				url: "../subwest/data/barType2.json",
				async: false,//改为同步方式
				type: "GET",
			//	data: { arg: val },
				success: function (data) {
					$(data.data).each(function(index,items){
						tmp.push(items.sjmc);
						tmp.push(items.sjms);
						tmp.push(items.wxdj);
						tmp.push(edit_add_item(index%2));
						//tmp.push(add_item(index));
						barTypeEvent[index]=tmp;
						tmp=[];
					})				
				}
			});
		}
*/
		var table = $('#sample_1');
		var oTable =table.dataTable({
			"destroy": true,
			"data": barTypeEvent,			
			"pageLength": 2, //分页后找不到下一页数据，总是位于当前行，需%page
			"lengthChange": false,
			"info":false,
			columnDefs:[{
                 orderable:false,//禁用排序
                 targets:[3]   //指定的列
            }],
			buttons: [
                { extend: 'print', className: 'btn dark btn-outline' },
                { extend: 'pdf', className: 'btn green btn-outline' },
                { extend: 'csv', className: 'btn purple btn-outline ' }
            ],
           // responsive: true,
			colReorder: {
                reorderCallback: function () {
                    console.log( 'callback' );
                }
            },
            "order": [
                [0, 'asc']
            ],
			"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>"
		});
		
		//@测试列段过滤
		var oTable_filter=oTable.api();
		$('.toggle-vis').on('change', function (e) {
		   e.preventDefault();
		   var column = oTable_filter.column($(this).attr('data-column'));
		   column.visible(!column.visible());
		});
		$('#showcol').click(function () {
		   $('.showul').toggle();
		})
/*
		##########行内编辑，该功能不被采用###########################
		function restoreRow(oTable, nRow) {
            var aData = oTable.fnGetData(nRow);
            var jqTds = $('>td', nRow);

            for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
                oTable.fnUpdate(aData[i], nRow, i, false);
            }

            oTable.fnDraw();
        }
		function editRow(oTable, nRow) {
            var aData = oTable.fnGetData(nRow);
            var jqTds = $('>td', nRow);
            jqTds[0].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[0] + '">';
            jqTds[1].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[1] + '">';
            jqTds[2].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[2] + '">';
            jqTds[3].innerHTML = '<a class="edit" href="">保存修改</a>';

        }
		function saveRow(oTable, nRow) {
            var jqInputs = $('input', nRow);
            oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
            oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
            oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
            oTable.fnUpdate('<a class="edit" href=""><i class="fa fa-edit">编辑事件</i></a>', nRow, 3, false);         
            oTable.fnDraw();
        }
		var nEditing = null;
        var nNew = false;
		
        table.on('click', '.edit', function (e) {
            e.preventDefault();
            nNew = false;
            
            ############### Get the row as a parent of the link that was clicked on
            var nRow = $(this).parents('tr')[0];

            if (nEditing !== null && nEditing != nRow) {
            ###################Currently editing - but not this row - restore the old before continuing to edit mode
                restoreRow(oTable, nEditing);
                editRow(oTable, nRow);
                nEditing = nRow;
				
            } else if (nEditing == nRow && this.innerHTML == "保存修改") {
            #####################Editing this row and want to save it
                saveRow(oTable, nEditing);
                nEditing = null;
              //  alert("Updated! Do not forget to do some ajax to sync with backend :)");
            } else {
            ###################No edit in progress - let's start one
                editRow(oTable, nRow);
                nEditing = nRow;
				
            }
        });
*/
		/*
		var table=$('#sample_1');
		$('#sample_1 tbody tr').remove();
		for(var i=0;i<barTypeEvent.length;i++)
		{
			var tr=$("<tr></tr>");
			tr.appendTo(table);
			for(var j=0;j<barTypeEvent[i].length;j++)
			{
				var td=$("<td>"+barTypeEvent[i][j]+"</td>");
				td.appendTo(tr);
			}
		}
		*/
		
	});
    
	$(document).ready(function() {
		//@注意dataTable()，这里需大写DataTable()，否则列隐藏失效
		var myTable_1=$('#sample_1').DataTable({
			"pageLength": 2,
			"lengthChange": false,
			"info":false,
			"searching":false,
			"data": "",
			columnDefs:[{
                 orderable:false,//禁用排序
                 targets:[3]   //指定的列
            }]
		});   
		$('#showcol').hide();
	});
	//@
	var optionw3 = {
		color: ['#3398DB'],
		tooltip : {
			trigger: 'axis',
			axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis : [
			{
				type : 'category',
				data : barData_event,
				axisTick: {
					alignWithLabel: true
				}
			}
		],
		yAxis : [
			{
				type : 'value'
			}
		],
		series : [
			{
				name:'直接访问',
				type:'bar',
				barWidth: '60%',
				data:barData_nums
			}
		]
	};
	myChartw3.setOption(optionw3);
	barTypeEventDetail=getTwoDensionArr(1,6);
	myChartw3.on('mouseover', function (params) {
		tmp=[];
		lineTmp_time=[];
		lineTmp_nums=[];
		//console.log(params.name); 根据事件类型返回对应的事件列表
		var jsonBarTableObj={category:"eventList",name:params.name,level:2};
		$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/levelStat?param="+JSON.stringify(jsonBarTableObj)),function(data){
			barTypeEventDetail.length=data.data.length;
			$(data.data).each(function(index,items){
				if(items.jlms==null)
				{
					items.jlms="undefined";
				}
				tmp.push(items.sj);
				tmp.push(items.ycip);
				tmp.push(items.bdip);
				tmp.push(items.ycwz);
				tmp.push(items.jlms);
				tmp.push(items.zcmc);
				barTypeEventDetail[index]=tmp;
				tmp=[];
			})
		});
		
		//@与之前考虑冲突
		
		function switchTime_H()
		{
			var jsonLineHObj={category:"timeChart",level:2,name:params.name,start:"2016-12-01 00:00:00",end:"2016-12-30 00:00:00"}; 
			$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/levelStat?param="+JSON.stringify(jsonLineHObj)),function(data){
				$(data.data).each(function(index,item){
					lineTmp_time.push(item.time);
					lineTmp_nums.push(item.count);
				})
				lineData_time=lineTmp_time;
				lineData_nums=lineTmp_nums;
				
				lineTmp_time=[];
				lineTmp_nums=[];
			});
			var optionw4= {
			
				tooltip : {
					trigger: 'axis'
				},
				
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis : [
					{
						type : 'category',
						boundaryGap : false,
						data : lineData_time
					}
				],
				yAxis : [
					{
						type : 'value'
					}
				],
				series : [
					
					{
						name:'发生次数',
						type:'line',
						stack: '总量',
						label: {
							normal: {
								show: true,
								position: 'top'
							}
						},
						areaStyle: {normal: {}},
						data:lineData_nums
					}
				]
			};
			myChartw4.setOption(optionw4);
		}
		
	
	    //@演示时间精度切换
		function switchTime_d()
		{
			//var val=$('input:radio[name="mytime"]:checked').val();
			var jsonLinedObj={category:"timeChart",level:2,name:params.name,start:"2016-12-01 00:00:00",end:"2016-12-30 00:00:00",precision:"d"}; 
			$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/levelStat?param="+JSON.stringify(jsonLinedObj)),function(data){
				$(data.data).each(function(index,item){
					lineTmp_time.push(item.time);
					lineTmp_nums.push(item.count);
				})
				lineData_time=lineTmp_time;
				lineData_nums=lineTmp_nums;
				
				lineTmp_time=[];
				lineTmp_nums=[];
			});
			var myChartw4 = echarts.init(document.getElementById('mainw4'));
	
			var optionw4= {
		
				tooltip : {
					trigger: 'axis'
				},
				
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis : [
					{
						type : 'category',
						boundaryGap : false,
						data : lineData_time
					}
				],
				yAxis : [
					{
						type : 'value'
					}
				],
				series : [
					
					{
						name:'发生次数',
						type:'line',
						stack: '总量',
						label: {
							normal: {
								show: true,
								position: 'top'
							}
						},
						areaStyle: {normal: {}},
						data:lineData_nums
					}
				]
			};
			myChartw4.setOption(optionw4);
		 }
		 
		 function switchTime_M()
		{
			var jsonLineMObj={category:"timeChart",level:2,name:params.name,start:"2016-12-01 00:00:00",end:"2016-12-30 00:00:00",precision:"M"}; 
			$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/levelStat?param="+JSON.stringify(jsonLineMObj)),function(data){
				$(data.data).each(function(index,item){
					lineTmp_time.push(item.time);
					lineTmp_nums.push(item.count);
				})
				lineData_time=lineTmp_time;
				lineData_nums=lineTmp_nums;
				
				lineTmp_time=[];
				lineTmp_nums=[];
			});
			var optionw4= {
			
				tooltip : {
					trigger: 'axis'
				},
				
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis : [
					{
						type : 'category',
						boundaryGap : false,
						data : lineData_time
					}
				],
				yAxis : [
					{
						type : 'value'
					}
				],
				series : [
					
					{
						name:'发生次数',
						type:'line',
						stack: '总量',
						label: {
							normal: {
								show: true,
								position: 'top'
							}
						},
						areaStyle: {normal: {}},
						data:lineData_nums
					}
				]
			};
			myChartw4.setOption(optionw4);
		}
		var val=$('input:radio[name="mytime"]:checked').val();
		//alert(val);
		if(val=="H")
			switchTime_H();
		else if(val=="d")
			switchTime_d();
		else	
			switchTime_M();
/*		
		if(params.name=="event-A")
		{
			$.ajax({
				url: "../subwest/data/barEventDetail.json",
				async: false,//改为同步方式
				type: "GET",
			//	data: { arg: val },
				success: function (data) {
					$(data.data).each(function(index,items){
						tmp.push(items.sj);
						tmp.push(items.ycip);
						tmp.push(items.bdip);
						tmp.push(items.ycwz);
						tmp.push(items.jlms);
						tmp.push(items.zcmc);
						barTypeEventDetail[index]=tmp;
						tmp=[];
					})
				}
			});
		}
		else
		{
			$.ajax({
				url: "../subwest/data/barEventDetail2.json",
				async: false,//改为同步方式
				type: "GET",
			//	data: { arg: val },
				success: function (data) {
					$(data.data).each(function(index,items){
						tmp.push(items.sj);
						tmp.push(items.ycip);
						tmp.push(items.bdip);
						tmp.push(items.ycwz);
						tmp.push(items.jlms);
						tmp.push(items.zcmc);
						barTypeEventDetail[index]=tmp;
						tmp=[];
					})
				}
			});
		}
*/
		$('#sample_2').dataTable({
			"destroy": true,
			"data": barTypeEventDetail,			
			"pageLength": 2,
			"lengthChange": false,
			"info":false,
			 buttons: [
                { extend: 'print', className: 'btn dark btn-outline' },
                { extend: 'pdf', className: 'btn green btn-outline' },
                { extend: 'csv', className: 'btn purple btn-outline ' }
            ],
           // responsive: true,
			colReorder: {
                reorderCallback: function () {
                    console.log( 'callback' );
                }
            },
            "order": [
                [0, 'asc']
            ],
			"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>"
		});
		//@测试拖拽事件
		function getRandomId()
		{
			var count=100; 
			var original=new Array;
			for (var i=0;i<count;i++){ 
				original[i]=i+1; 
			} 
			var d1=new Date().getTime(); 
			original.sort(function(){ 
				return 0.5 - Math.random(); 
			}); 
			return original; 
		}
		var tds=document.getElementsByTagName('td'); //bug,只能得到当前页的td标签；这里需点击>进入下一页
		var numIds=getRandomId();
		for(var j=0;j<tds.length;j++)
		{
			tds[j].setAttribute("id",numIds[j]);
			tds[j].setAttribute("draggable",true);
			tds[j].setAttribute("ondragstart","drag(event)");
		}
	});
    
	$(document).ready(function() {
		$('#sample_2').dataTable({
			"pageLength": 2,
			"lengthChange": false,
			"info":false,
			"searching":false,
			"data": "",			
		});   
	});
	//@
/*
	var optionw4= {
		
		tooltip : {
			trigger: 'axis'
		},
		
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis : [
			{
				type : 'category',
				boundaryGap : false,
				data : lineData_time
			}
		],
		yAxis : [
			{
				type : 'value'
			}
		],
		series : [
			
			{
				name:'发生次数',
				type:'line',
				stack: '总量',
				label: {
					normal: {
						show: true,
						position: 'top'
					}
				},
				areaStyle: {normal: {}},
				data:lineData_nums
			}
		]
	};
	myChartw4.setOption(optionw4);
	
	//@演示时间精度切换
	function switchTime()
	{
		var val=$('input:radio[name="mytime"]:checked').val();
		
		var myChartw4 = echarts.init(document.getElementById('mainw4'));
		 
		lineData_time=[];
		lineData_nums=[];
		$.ajax({
			url: "../subwest/data/line1.json",
			async: false,//改为同步方式
			type: "GET",
		//	data: { arg: val },
			success: function (data) {
				$(data.data).each(function(index,item){
					lineData_time.push(
						item.time
					);
					lineData_nums.push(
						item.count				
					);
				})
			}
		});
		var optionw4= {
	
			tooltip : {
				trigger: 'axis'
			},
			
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis : [
				{
					type : 'category',
					boundaryGap : false,
					data : lineData_time
				}
			],
			yAxis : [
				{
					type : 'value'
				}
			],
			series : [
				
				{
					name:'发生次数',
					type:'line',
					stack: '总量',
					label: {
						normal: {
							show: true,
							position: 'top'
						}
					},
					areaStyle: {normal: {}},
					data:lineData_nums
				}
			]
		};
		myChartw4.setOption(optionw4);
	 }
*/
</script>
</body>
<html>